<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3.4.jQuery常用API-jQuery筛选方法</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">yeye中father中的儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>nav中的p</p>
        <div>
            <p>nav中div中的p</p>
        </div>
    </div>
    <ol>
        <li>ol的li</li>
        <li>ol的li</li>
        <li class="item">ol的li</li>
        <li>ol的li</li>
        <li>ol的li</li>
        <li>ol的li</li>
    </ol>
    <ul>
        <li>ul的li</li>
        <li>ul的li</li>
        <li>ul的li</li>
        <li>ul的li</li>
        <li>ul的li</li>
        <li>ul的li</li>
    </ul>
    <div class="current">有current类名</div>
    <div>没有current类名</div>
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">one中two中three的four</div>
            </div>
        </div>
    </div>
    <script>
        // 注意以下都是方法，带括号
        $(function () {
            // 1.父 parent() 返回最近一级的父级元素（亲爸爸）
            console.log($(".son").parent());

            // 2.子
            //（1）亲儿子 children() 类似于自带选择器 ul>li
            $(".nav").children("p").css("color", "red");
            //（2）可以选择里面所有的孩子，包括儿子和孙子 find() 类似于后代选择器
            $(".nav").find("p").css("color", "blue");

            // 3.兄
            // （1）兄弟元素 siblings()除了自身元素之外的所有亲兄弟 // nextAll()之前的 // prevAll()之后的
            $("ol .item").siblings("li").css("color", "green");
            $("ol .item").nextAll("li").css("color", "skyblue");
            $("ol .item").prevAll("li").css("color", "yellow");
            // （2）第n个元素
            var index = 2;
            // 利用选择器的方式选择
            $("ul li:eq(2)").css("color", "blue");
            // $("ul li:eq(" + index + ")").css("color", "blue");
            // 利用选择方法 更推荐这种
            $("ul li").eq(index).css("color", "red");
            // （3）判断是否有类名
            console.log($("div:eq(5)").hasClass("current"));
            console.log($("div:last").hasClass("current"));
            // （4）祖先 parents() 可以返回指定祖先元素
            // console.log($(".four").parent().parent().parent(".one"));
            console.log($(".four").parents(".one"));

        });
    </script>
</body>

</html>